<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../../static/css/aui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../lib/swiper/swiper.min.css" />
		<title>Noticebar通告栏</title>
		<style>
			.aui-content{padding: 0;}
			.content-top{width: 100%; line-height: 25px; padding: 20px 15px; box-sizing: border-box; font-size: 14px; color: #aaa;}
			.aui-card-main .aui-noticebar{margin: 0 0 10px 0;}
			.aui-card-main .aui-noticebar:last-child{margin: 0;}
		</style>
	</head>
	<body>
		<div class="container" id="app">
			<header class="aui-header">
				<a class="aui-header-left" onclick="aui.closeWin()"><i class="iconfont iconreturn"></i></a>
				<div class="aui-header-title">Noticebar通告栏</div>
			</header>
			<div class="aui-content" v-cloak>
				<div class="content-top">
					Noticebar通告栏组件多用于系统通知，广告通知等场景，可自定义图标，颜色，展现方式等。
				</div>
				<!-- 基础用法 -->
				<div class="aui-card">
					<div class="aui-card-title"><span class="aui-card-title-line"></span>基础用法</div>
					<div class="aui-card-main" style="padding: 10px 0;">
						<div class="aui-noticebar">
							<div class="aui-noticebar-main">
								[单行]aui 是一套基于原生javascript开发的移动端UI组件库
							</div>
						</div>
						<div class="aui-noticebar">
							<div class="aui-noticebar-main">
								[多行]aui 是一套基于原生javascript开发的移动端UI组件库，包含常用js方法、字符校验...
							</div>
						</div>
					</div>
				</div>
				<!-- 加图标 -->
				<div class="aui-card">
					<div class="aui-card-title"><span class="aui-card-title-line"></span>加图标</div>
					<div class="aui-card-main" style="padding: 10px 0;">
						<div class="aui-noticebar">
							<div class="aui-noticebar-main">
								<div class="aui-noticebar-left"><i class="iconfont iconsystemprompt"></i></div>
								<div class="aui-noticebar-center">
									[单行]aui 是一套基于原生的移动端UI组件库
								</div>
							</div>
						</div>
						<div class="aui-noticebar">
							<div class="aui-noticebar-main">
								<div class="aui-noticebar-left"><i class="iconfont iconsystemprompt"></i></div>
								<div class="aui-noticebar-center">
									[多行]aui 是一套基于原生javascript开发的移动端UI组件库，包含常用js方法、字符校验...
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 横向滚动 -->
				<div class="aui-card">
					<div class="aui-card-title"><span class="aui-card-title-line"></span>横向滚动</div>
					<div class="aui-card-main" style="padding: 10px 0;">
						<div class="aui-noticebar aui-noticebar-row">
							<div class="aui-noticebar-main">
								<div class="aui-noticebar-center">
									<div class="aui-noticebar-texts">
										<p class="aui-noticebar-text">aui 是一套基于原生javascript开发的移动端UI组件库</p>
										<p class="aui-noticebar-text">包含常用js方法、字符校验、dialog提示弹窗</p>
										<p class="aui-noticebar-text">数字键盘、侧滑菜单、时间选择器、多级联动、聊天UI、项目常用模板</p>
									</div>
								</div>
							</div>
						</div>
						<div class="aui-noticebar aui-noticebar-row">
							<div class="aui-noticebar-main">
								<div class="aui-noticebar-left"><i class="iconfont iconsystemprompt"></i></div>
								<div class="aui-noticebar-center">
									<div class="aui-noticebar-texts">
										<p class="aui-noticebar-text">aui 是一套基于原生javascript开发的移动端UI组件库</p>
										<p class="aui-noticebar-text">包含常用js方法、字符校验、dialog提示弹窗</p>
										<p class="aui-noticebar-text">数字键盘、侧滑菜单、时间选择器、多级联动、聊天UI、项目常用模板</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 纵向滚动 -->
				<div class="aui-card">
					<div class="aui-card-title"><span class="aui-card-title-line"></span>纵向滚动</div>
					<div class="aui-card-main" style="padding: 10px 0;">						
						<div class="aui-noticebar aui-noticebar-col">
							<div class="aui-noticebar-main">
								<div class="aui-noticebar-center">
									<div class="aui-noticebar-texts">
										<div class="swiper-container">
											<div class="swiper-wrapper">
												<div class="swiper-slide">
													<p class="aui-noticebar-text">aui 是一套基于原生javascript开发的移动端UI组件库</p>
												</div>
												<div class="swiper-slide">
													<p class="aui-noticebar-text">aui 是一套基于原生javascript开发的移动端UI组件库</p>
												</div>
												<div class="swiper-slide">
													<p class="aui-noticebar-text">aui 是一套基于原生javascript开发的移动端UI组件库</p>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="aui-noticebar aui-noticebar-col">
							<div class="aui-noticebar-main">
								<div class="aui-noticebar-left"><i class="iconfont iconsystemprompt"></i></div>
								<div class="aui-noticebar-center">
									<div class="aui-noticebar-texts">
										<div class="swiper-container">
											<div class="swiper-wrapper">
												<div class="swiper-slide">
													<p class="aui-noticebar-text">aui 是一套基于原生javascript开发的移动端UI组件库</p>
												</div>
												<div class="swiper-slide">
													<p class="aui-noticebar-text">aui 是一套基于原生javascript开发的移动端UI组件库</p>
												</div>
												<div class="swiper-slide">
													<p class="aui-noticebar-text">aui 是一套基于原生javascript开发的移动端UI组件库</p>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
			</div>
		</div>
		<script type="text/javascript" charset="utf-8" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
		<script type="text/javascript" src="../../../lib/vue.min.js"></script>
		<script type="text/javascript" src="../../../lib/jquery/jquery-2.1.3.min.js"></script>
		<script type="text/javascript" src="../../../lib/swiper/swiper.min.js" charset="utf-8"></script>
		<script type="text/javascript" src="../../../static/js/aui.min.js"></script>
		<script type="text/javascript">
			window.onload = function() {
				apiready();
			}
			apiready = function() {
				var vm = new Vue({
					el: "#app",
					data: {
						lists: [],
					},
					created: function() {
						var _this = this;
					},
					mounted: function() {
						var _this = this;
						_this.initNotice();
					},
					updated: function() {
						var _this = this;
						_this.$nextTick(function() {

						})
					},
					methods: {
						//纵向滚动初始化=>借助swiper轮播图
						initNotice(){
							var _this = this;
							var swiper = new Swiper('.swiper-container', {
								slidesPerView :'auto',
								autoplay: 1500,
								direction:'vertical',
								grabCursor:true,
								autoplayDisableOnInteraction:false,
								mousewheelControl:true,
								autoHeight:true,
								speed: 1000,
								loop: true
							});
						},
					}
				});
			}
		</script>
	</body>
</html>
